<template>
    <div>
        <div class="box-a"></div>
    </div>
</template>
<script>
export default {
    setup() {
        
    },

}
</script>
<style scoped>
.box-a{
    width: 100px;
    height: 100px;
    background-color: #bfa;
    border-radius: 50px;
    position: relative;
    animation: myframe 5s infinite;
}
/* @keyframes myframe{
    from{
        top: 0px;
    }
    to{
        top: 200px;
    }
} */
@keyframes myframe{
    0%{
        top: 0px;
        left:0px;
    }
    25%{
        top: 0px;
        left:100px
    }
    50%{
        top: 100px;
        left:100px
    }
    75%{
        top: 100px;
        left:0px
    }
    100%{
    top: 0px;
        left:0px
    }
}
</style>